<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
<head>
	<base th:href="@{/}"><!-- 不用base就使用th:src="@{/js/jquery.min.js} -->
	<meta charset="UTF-8">
	<title>注册</title>
	<link rel="stylesheet" type="text/css" href="css/public.css"/>
	<link rel="stylesheet" type="text/css" href="css/login.css"/>
	<link rel="stylesheet" href="layui/css/modules/layer/default/layer.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
	<script src="js/jquery.min.js"></script>
	<script src="js/common.js"></script>
	<script src="layui/layui.js"></script>
</head>
	<body>
		<!-------------------reg-------------------------->
		<div class="reg">
			<form action="false">
				<a th:href="@{/}"><h1><img src="img/temp/logo.png"></h1></a>
				<p style="font-size: 25px">用户注册</p>
				<p><input type="text" id="email" name="" value="" placeholder="请输入邮箱"></p>
				<p><input type="text" id="userName" name="" value="" placeholder="请输入用户名"></p>
				<p><input type="text" id="password" name="" value="" placeholder="请输入密码"></p>
				<p><input type="text" id="confirmPwd" name="" value="" placeholder="请确认密码"></p>
				<p class="txtL txt">
					<input type="button" id="sendBtn" class="btn btn-primary" value="发送邮箱验证码" >
					<br><br>
					<input class="code" type="text" id="eCode" name="" value="" placeholder="输入验证码">
				</p>
				<p><input type="button" id="register" class="btn btn-primary" name="" value="注册"></p>
				<!--<p class="txtL txt"><a href="#">使用条款和隐私策略</a></p>-->
				<p class="txt"><a th:href="@{user/toLogin}"><span></span>已有账号? 登录</a></p>
				<!--<a href="#" class="off"><img src="img/temp/off.png"></a>-->
			</form>
		</div>
	</body>
<script>
	//-------------验证邮箱----------------
	$("#email").blur(function () {
		//验证是否为空
		var email=$("#email").val();
		if (email==null||email==""){
			layer.msg("请填写邮箱");
			return;
		}if (!email.endsWith('@qq.com')){
			layer.msg("仅支持QQ邮箱");
			return;
		}
		//发起ajax请求
		$.post("/furniture/user/checkEmail",{"email":email},function (data) {
			if (data.state==200){
				layer.msg(data.message);
			}else {
				layer.confirm(data.message,{
					icon:2, btn:['确定']
				},function () {
					location.reload();
				});
			}
		});
	});
	//-------------验证用户名----------------------
	$("#userName").blur(function () {
		//验证是否为空
		var userName=$("#userName").val();
		if (userName==null||userName==""){
			layer.msg("请填写用户名");
			return;
		}
		//发起ajax请求
		$.post("/furniture/user/checkUserName",{"userName":userName},function (data) {
			if (data.state==200){
				layer.msg(data.message);
			}else {
				layer.confirm(data.message,{
					icon:2, btn:['确定']
				},function () {
					location.reload();
				});
			}
		});
	});
	//-------------验证密码-------------------------
	$("#confirmPwd").blur(function () {
		var password = $("#password").val();
		if (password==null||password==""){
			layer.msg("原始密码必填");
			return;
		}
		var confirmPwd = $("#confirmPwd").val();
		if (confirmPwd!=password){
			layer.msg("两次密码输入不一致");
			return;
		}
			layer.msg("密码验证通过");
	});

	//-----------发送邮件事件----------------------
	$("#sendBtn").click(function () {
		var email = $("#email").val();
		$.post("/furniture/user/sendEmail",{"email":email},function (data) {
			layer.msg(data.message);
		});
	});
	//--------注册-----------------------------
	$("#register").click(function () {
		//获取所有输入值，不为空的时候显示注册按钮
		var email = $("#email").val();
		var userName = $("#userName").val()
		var password = $("#password").val();
		var confirmPwd = $("#confirmPwd").val();
		var eCode = $("#eCode").val();
		if ((email!=null&&email!="")&&
				(userName!=null&&userName!="")&&
				(password!=null&&password!="")&&
				(confirmPwd!=null&&confirmPwd!="")&&
				(eCode!=null&&eCode!="")){
			var url = "/furniture/user/doReg";
			//与实体类的属性名一致才能封装在Controller的方法的参数（对象）中
			var param = {"email":email,"userName":userName,"password":password,"confirmPwd":confirmPwd,"eCode":eCode};
			$.post(url,param,function (data) {
				if (data.state == 200){
					layer.confirm(data.message,{
						icon:1, btn:['确定']
					},function () {
						location.href="/furniture/user/toLogin";
					});
				}else{
					layer.msg(data.message);
				}
			});
		}
	});
</script>
</html>
